<template>
    <div>
      <!-- 登录状态切换按钮 -->
      <button @click="isLoggedIn = !isLoggedIn">
        {{ isLoggedIn ? '退出登录' : '登录' }}
      </button>
  
      <!-- 使用 v-if 控制登录后显示的内容 -->
      <div v-if="isLoggedIn">
        <h2>欢迎回来！</h2>
        <p>您已成功登录，可以访问会员专属内容。</p>
      </div>
  
      <!-- 使用 v-show 控制登录提示的显示与隐藏 -->
      <p v-show="!isLoggedIn">请先登录以访问更多功能。</p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 定义响应式变量来表示登录状态
  const isLoggedIn = ref(false);
  </script>
  
  <style scoped>
  button {
    margin-bottom: 10px;
  }
  </style>